"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Camera, Pause, Play, Users, BookOpen } from "lucide-react"
import { CameraFeed } from "@/components/camera-feed_websocket"
import { StudentAnalytics } from "@/components/student-analytics"
import { ContentAnalytics } from "@/components/content-analytics"

export default function MonitoringPage() {
  const [isMonitoring, setIsMonitoring] = useState(false)
  const [selectedClass, setSelectedClass] = useState("math101")
  const [mainCamera, setMainCamera] = useState<"student" | "content">("student")

  // 切换主摄像头和画中画摄像头
  const switchCameras = () => {
    setMainCamera((prev) => (prev === "student" ? "content" : "student"))
  }

  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1 p-6 md:p-10">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 gap-4">
          <h1 className="text-3xl font-bold">实时监控</h1>
          <div className="flex items-center gap-4">
            <Select value={selectedClass} onValueChange={setSelectedClass}>
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="选择课程" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="math101">数学 101</SelectItem>
                <SelectItem value="physics201">物理 201</SelectItem>
                <SelectItem value="chemistry301">化学 301</SelectItem>
                <SelectItem value="biology401">生物 401</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <Card className="mb-6">
          <CardHeader className="pb-2">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <CardTitle>摄像头监控</CardTitle>
              <div className="flex items-center gap-2">
                <div
                  className={`flex items-center gap-1 px-3 py-1 rounded-md ${mainCamera === "student" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
                >
                  <Users className="h-4 w-4" />
                  <span className="text-sm">学生监控</span>
                </div>
                <div
                  className={`flex items-center gap-1 px-3 py-1 rounded-md ${mainCamera === "content" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
                >
                  <BookOpen className="h-4 w-4" />
                  <span className="text-sm">黑板/PPT监控</span>
                </div>
              </div>
            </div>
            <CardDescription className="pt-2">点击任意摄像头画面可切换主次显示</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="relative aspect-[16/9] w-full rounded-md overflow-hidden bg-muted">
              {/* 主摄像头 */}
              <div className="w-full h-full">
                <CameraFeed
                  type={mainCamera}
                  isActive={true}
                  className="w-full h-full"
                  isPrimary={true}
                  onSwitchCamera={switchCameras}
                />
              </div>

              {/* 画中画摄像头 */}
              <div
                className="absolute bottom-4 right-4 w-1/5 aspect-[16/9] rounded-md overflow-hidden border-2 border-white shadow-lg cursor-pointer hover:border-primary transition-colors"
                onClick={switchCameras}
              >
                <CameraFeed
                  type={mainCamera === "student" ? "content" : "student"}
                  isActive={true}
                  className="w-full h-full"
                  isPrimary={false}
                  pipMode={true}
                />
              </div>
            </div>
          </CardContent>
        </Card>

      </main>
    </div>
  )
}
